import { connect } from 'dva';
import React from 'react';
import {
  Col,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Row,
  Tabs,
  Select,
  Upload,
  Icon,
  Modal,
  Button,
} from 'antd';

import moment from 'moment';

const FormItem = Form.Item;
const { TabPane } = Tabs;

const OrderTrailerInfo = Form.create()(
  class CreateForm extends React.Component {
    state: {
      open: false;
    };

    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      console.info(this, 'dgjfhgjfghj');
      this.setState({ open: false });
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;

      const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
      const formItemLayout2 = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };
      const formItemLayout3 = { labelCol: { span: 1 }, wrapperCol: { span: 22 } };

      const divWithOutBorderBottom = {
        display: 'flex',
        borderRight: '1px solid #e9e9e9',
        borderLeft: '1px solid #e9e9e9',
        borderTop: '1px solid #e9e9e9',
        borderSpacing: 0,
        lineHeight: 3.5,
        // textAlign: 100,
      };

      const columnBreak = {
        display: 'flex',
        borderRight: '1px solid #e9e9e9',
        borderLeft: '1px solid #e9e9e9',
        borderTop: '1px solid #e9e9e9',
        borderSpacing: 0,
        textAlign: 'left',
      };

      const footer = [];

      footer.push(
        <Button key="cancel" size="large" onClick={() => this.handleCancel()}>
          取消
        </Button>,
      );

      footer.push(
        // @ts-ignore
        <Button key="submit" size="large" loading={this.props.loading}>
          确认
        </Button>,
      );

      // @ts-ignore
      return (
        <Modal
          destroyOnClose
          title="拖车工作单"
          visible={this.state.open}
          width={950}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <div>
            <Form>
              <Tabs tabPosition="top">
                <TabPane tab="整柜" key="1">
                  <div>
                    <Tabs tabPosition="top">
                      <TabPane tab="制定拖车计划" key="1">
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="供应商名称" hasFeedback>
                              {getFieldDecorator('trailerSupplierName', {
                                initialValue: '',
                              })(<Input disabled maxLength={100} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="下单时间" hasFeedback>
                              {getFieldDecorator('receiptCreatetime', {
                                initialValue: '',
                              })(
                                <DatePicker
                                  disabled
                                  style={{ width: '100%' }}
                                  showTime={{ format: 'YYYY-MM-DD' }}
                                  format="YYYY-MM-DD"
                                />,
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="拖车下单人" hasFeedback>
                              {getFieldDecorator('receiptCreator', {
                                initialValue: '',
                              })(<Input disabled maxLength={100} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="BL(SO)" hasFeedback>
                              {getFieldDecorator('soNo', {
                                initialValue: '',
                              })(<Input disabled maxLength={50} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="货名">
                              {getFieldDecorator('productName', {
                                initialValue: '',
                              })(<Input maxLength={50} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="重量" hasFeedback>
                              {getFieldDecorator('weight', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入重量',
                                  },
                                ],
                                initialValue: '',
                              })(<InputNumber min={0} style={{ width: '100%' }} maxLength={18} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={2} style={{ marginLeft: 80 }}>
                            <span>柜型/柜量:</span>
                          </Col>
                          <Col span={4}>
                            <FormItem {...formItemLayout3}>
                              {getFieldDecorator('size20gp', {
                                initialValue: '',
                              })(
                                <InputNumber
                                  disabled
                                  min={0}
                                  maxLength={4}
                                  style={{ width: '100%' }}
                                />,
                              )}
                            </FormItem>
                          </Col>
                          <Col span={2}>
                            <span>*20GP</span>
                          </Col>
                          <Col span={4}>
                            <FormItem {...formItemLayout3}>
                              {getFieldDecorator('size40gp', {
                                initialValue: '',
                              })(
                                <InputNumber
                                  disabled
                                  min={0}
                                  maxLength={4}
                                  style={{ width: '100%' }}
                                />,
                              )}
                            </FormItem>
                          </Col>
                          <Col span={2}>
                            <span>*40GP</span>
                          </Col>
                          <Col span={4}>
                            <FormItem {...formItemLayout3}>
                              {getFieldDecorator('size40hq', {
                                initialValue: '',
                              })(
                                <InputNumber
                                  disabled
                                  min={0}
                                  maxLength={4}
                                  style={{ width: '100%' }}
                                />,
                              )}
                            </FormItem>
                          </Col>
                          <Col span={2}>
                            <span>*40HQ</span>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="提柜地点">
                              {getFieldDecorator('raiseCabinetAddress', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入提柜地点',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={150} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="还柜地点" hasFeedback>
                              {getFieldDecorator('alsoCabinetAddress', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入还柜地点',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={150} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="装柜地址" hasFeedback>
                              {getFieldDecorator('area', {
                                initialValue: '',
                              })(<Select style={{ width: '100%' }} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="装柜时间" hasFeedback>
                              {getFieldDecorator('wholeLoadingTime', {
                                initialValue: '',
                              })(
                                <DatePicker
                                  style={{ width: '100%', marginBottom: 5 }}
                                  showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                                  format="YYYY-MM-DD HH:mm:ss"
                                />,
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={24}>
                            <FormItem {...formItemLayout2} label="装柜详细地址" hasFeedback>
                              {getFieldDecorator('detailAddress', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入装柜详细地址',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={300} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="装柜联系人" hasFeedback>
                              {getFieldDecorator('loadingContacts', {
                                initialValue: '',
                              })(<Input maxLength={50} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="联系方式" hasFeedback>
                              {getFieldDecorator('loadingTelephone', {
                                initialValue: '',
                              })(<Input maxLength={50} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="监装人" hasFeedback>
                              {getFieldDecorator('checkContacts', {
                                rules: [
                                  {
                                    required: false,
                                    message: '请输入监装人',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={18} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="拖车费" hasFeedback>
                              {getFieldDecorator('trailerFee', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入拖车费',
                                  },
                                ],
                                initialValue: '',
                              })(<InputNumber maxLength={18} style={{ width: '100%' }} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={24}>
                            <FormItem {...formItemLayout2} label="特殊要求" hasFeedback>
                              {getFieldDecorator('requireDesc', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入特殊要求',
                                  },
                                ],
                                initialValue: '',
                              })(
                                // eslint-disable-next-line max-len
                                <Input.TextArea
                                  maxLength={300}
                                  autosize={{ minRows: 2, maxRows: 5 }}
                                />,
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={4} style={{ marginLeft: 90, marginBottom: 10 }}>
                            <a href="#">导出整柜拖车计划</a>
                          </Col>
                        </Row>
                      </TabPane>
                    </Tabs>
                    <Tabs tabPosition="top">
                      <TabPane tab="整柜拖车凭证" key="2">
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="柜号" hasFeedback>
                              {getFieldDecorator('cntrNo', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入柜号',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={300} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="封号" hasFeedback>
                              {getFieldDecorator('sealNumber', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入封号',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={50} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="过磅重量" hasFeedback>
                              {getFieldDecorator('weighWeight', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入过磅重量',
                                  },
                                ],
                                initialValue: '',
                              })(<InputNumber min={0} style={{ width: '100%' }} maxLength={18} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">过磅单</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">车头照</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">车尾照</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">GPS定位</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">还柜纸</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">派车单</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">其他材料</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                        </Row>

                        <Row>
                          <Col span={4} style={{ marginLeft: 90, marginBottom: 10 }}>
                            <a href="#">导出整柜派车单</a>
                          </Col>
                        </Row>
                      </TabPane>
                    </Tabs>
                  </div>
                </TabPane>
                <TabPane tab="散货" key="4">
                  <div>
                    <Tabs tabPosition="top">
                      <TabPane tab="散货托运单" key="1">
                        <div style={{ width: '90%', marginLeft: 50 }}>
                          <div style={{ textAlign: 'center' }}>
                            <div>
                              <span>
                                <b>托运单</b>
                              </span>
                            </div>
                            {/* eslint-disable-next-line max-len */}
                            <div style={{ marginTop: 10 }}>
                              <span>
                                <b>广州瀚森乐达供应链管理有限公司</b>
                              </span>
                            </div>
                          </div>
                          <div style={{ textAlign: 'left', marginTop: 10, marginBottom: 10 }}>
                            <div>
                              <span>TO: xx车队</span>
                            </div>
                            {/* eslint-disable-next-line max-len */}
                            <div style={{ marginTop: 10 }}>
                              <span>FM: 小刘／2019-09-22</span>
                            </div>
                            {/* eslint-disable-next-line max-len */}
                            <div style={{ marginTop: 10 }}>
                              <span>下单日期: 2019-09-20</span>
                            </div>
                          </div>
                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '17%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>委托送货方</div>
                            </div>
                            <div
                              style={{
                                width: '17%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>广州瀚森乐达</div>
                            </div>
                            <div
                              style={{
                                width: '16%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>联系人</div>
                            </div>
                            <div
                              style={{
                                width: '16%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>刘秀</div>
                            </div>
                            <div
                              style={{
                                width: '17%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>联系电话</div>
                            </div>
                            <div style={{ width: '17%', marginLeft: 10 }}>
                              <div>110110</div>
                            </div>
                          </div>

                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 装柜地址 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('detailAddress', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={100}
                                      style={{ width: '90%', marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>
                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 联系人 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('loadingContacts', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={50}
                                      style={{ width: '90%', marginLeft: 12, marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>

                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 联系人电话 &nbsp;
                                <span>
                                  {getFieldDecorator('loadingTelephone', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={20}
                                      style={{ width: '89%', marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>

                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 装货时间 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('loadingTime', {
                                    initialValue: '',
                                  })(
                                    <DatePicker
                                      style={{ width: '90%', marginBottom: 5 }}
                                      showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                                      format="YYYY-MM-DD HH:mm:ss"
                                      placeholder="请选择有效截止时间"
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>

                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '35%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 卸货人公司名称 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('unloadCompany', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={100}
                                      style={{ width: '62%', marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                            <div
                              style={{
                                width: '32%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 联系人 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('unloadContacts', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={100}
                                      style={{ width: '72%', marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                            <div
                              style={{
                                width: '33%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 联系电话 &nbsp;
                                <span>
                                  {getFieldDecorator('unloadTelephone', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={20}
                                      style={{ width: '70%', marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>
                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 卸货地址 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('unloadAddress', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={200}
                                      style={{ width: '90%', marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>
                          {/* eslint-disable-next-line max-len */}
                          <div style={Object.assign({}, { lineHeight: 5 }, columnBreak)}>
                            <div
                              style={{
                                width: '45%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 货物名称 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('productName', {
                                    initialValue: '',
                                  })(
                                    <Input.TextArea
                                      maxLength={50}
                                      style={{ width: '80%', marginTop: 5, marginBottom: 5 }}
                                      autosize={{ minRows: 5, maxRows: 6 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                            <div
                              style={{
                                width: '25%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 大约重量 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('probablyWeight', {
                                    initialValue: '',
                                  })(
                                    <InputNumber
                                      maxLength={18}
                                      style={{ width: '60%', marginTop: 5, marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                              <div style={{ borderTop: '1px solid #e9e9e9' }}>
                                <span style={{ color: 'red' }}>*</span> 大约件数 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('probablyPackagesNum', {
                                    initialValue: '',
                                  })(
                                    <InputNumber
                                      maxLength={11}
                                      style={{ width: '60%', marginTop: 5, marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                            <div
                              style={{
                                width: '30%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 大约方数 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('probablyCube', {
                                    initialValue: '',
                                  })(
                                    <InputNumber
                                      maxLength={18}
                                      style={{ width: '65%', marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                              <div style={{ borderTop: '1px solid #e9e9e9' }}>
                                <span style={{ color: 'red' }}>*</span> 货物包装 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('cargoPackages', {
                                    initialValue: '',
                                  })(
                                    <Input
                                      maxLength={15}
                                      style={{ width: '65%', marginTop: 5, marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>

                          {/* eslint-disable-next-line max-len */}
                          <div style={Object.assign({}, { lineHeight: 5 }, columnBreak)}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                备注 &nbsp;
                                <span>
                                  {getFieldDecorator('unloadMemo', {
                                    initialValue: '',
                                  })(
                                    <Input.TextArea
                                      maxLength={200}
                                      style={{
                                        width: '92%',
                                        marginTop: 5,
                                        marginLeft: 22,
                                        marginBottom: 5,
                                      }}
                                      autosize={{ minRows: 3, maxRows: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>

                          {/* eslint-disable-next-line max-len */}
                          <div style={Object.assign({}, { lineHeight: 4 }, columnBreak)}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>
                                <span style={{ color: 'red' }}>*</span> 提货费 &nbsp;&nbsp;
                                <span>
                                  {getFieldDecorator('pickUpCharge', {
                                    initialValue: '',
                                  })(
                                    <InputNumber
                                      maxLength={18}
                                      style={{ width: '92%', marginTop: 5, marginBottom: 5 }}
                                    />,
                                  )}
                                </span>
                              </div>
                            </div>
                          </div>

                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '100%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              {/* eslint-disable-next-line max-len */}
                              <div>
                                托运人须知：
                                门到门服务，每趟运输太平洋保险公司承保100万，货物价值超过100万需要及时告诉我公司，具体办法根据我公司与保险公司签订的协议处理。
                              </div>
                            </div>
                          </div>

                          <div style={divWithOutBorderBottom}>
                            <div
                              style={{
                                width: '33%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>托运人签名(盖章)</div>
                            </div>
                            <div
                              style={{
                                width: '33%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>承运人签名(盖章)</div>
                            </div>
                            <div
                              style={{
                                width: '34%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              <div>收货人签名(盖章)</div>
                            </div>
                          </div>

                          <div
                            style={Object.assign(
                              {},
                              { lineHeight: 10, borderBottom: '1px solid #e9e9e9' },
                              columnBreak,
                            )}
                          >
                            <div
                              style={{
                                width: '33%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              {/* eslint-disable-next-line max-len */}
                              <div>年 &nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp; 日</div>
                            </div>
                            <div
                              style={{
                                width: '33%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              {/* eslint-disable-next-line max-len */}
                              <div>年 &nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp; 日</div>
                            </div>
                            <div
                              style={{
                                width: '34%',
                                marginLeft: 10,
                                borderRight: '1px solid #e9e9e9',
                              }}
                            >
                              {/* eslint-disable-next-line max-len */}
                              <div>年 &nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp; 日</div>
                            </div>
                          </div>
                        </div>

                        <Row>
                          {/* eslint-disable-next-line max-len */}
                          <Col span={4} style={{ marginLeft: 90, marginTop: 10, marginBottom: 10 }}>
                            <a href="#">导出散货托运单</a>
                          </Col>
                        </Row>
                      </TabPane>
                    </Tabs>

                    <Tabs tabPosition="top">
                      <TabPane tab="散货运输凭证" key="1">
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="司机姓名" hasFeedback>
                              {getFieldDecorator('driverName', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入司机姓名',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={50} />)}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="联系电话" hasFeedback>
                              {getFieldDecorator('driverTelephone', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入联系电话',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={20} style={{ width: '100%' }} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="车牌号码" hasFeedback>
                              {getFieldDecorator('carNum', {
                                rules: [
                                  {
                                    required: true,
                                    message: '请输入车牌号码',
                                  },
                                ],
                                initialValue: '',
                              })(<Input maxLength={20} style={{ width: '100%' }} />)}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem
                              {...formItemLayout}
                              label={<span className="ant-form-item-required">签收单</span>}
                              hasFeedback
                            >
                              <Upload.Dragger>
                                <p className="ant-upload-drag-icon">
                                  <Icon type="inbox" />
                                </p>
                                <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                              </Upload.Dragger>
                            </FormItem>
                          </Col>
                        </Row>
                      </TabPane>
                    </Tabs>
                  </div>
                </TabPane>
              </Tabs>
            </Form>
          </div>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.trailerWord,
  };
}

export default connect(mapStateToProps)(OrderTrailerInfo);
